<template>
  <div>
    <!-- //大div -->
    <div style="width:100%;height:100vh">
      <h4
        style="text-align:center;height:6vh;line-height:6vh;color:red;  border-bottom: 1px solid gainsboro;"
      >
        澎湃新闻
      </h4>

      <!-- //top_div -->
      <div class="top_div_big">
        <div class="top_div_little">
          <div
            @click="top_onclick(index)"
            :class="top_index === index ? 'top_div_main_title' : ''"
            class="top_div_main"
            v-for="(item, index) in list_title"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <!-- //div_内容 -->
      <div style="width:100%;height:86vh; overflow: scroll;">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="(item, index) in list_top" :key="index">
              -->
              <template>
                <a-card hoverable style="width: 100vw">
                  <img slot="cover" alt="example" :src="item.imageUrls" />
                  <template slot="actions" class="ant-card-actions">
                    <a-icon key="setting" type="setting" />
                    <a-icon key="edit" type="edit" />
                    <a-icon key="ellipsis" type="ellipsis" />
                  </template>
                  <a-card-meta
                    :title="item.content"
                    :description="item.posterScreenName"
                  >
                  </a-card-meta>
                </a-card>
              </template>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      loading: false,
      refreshing: false,
      finished: false,
      list_top: [], //内容数据
      list_title: [
        //标题数据
        '热点',
        '娱乐',
        '明星',
        '黑料',
        '体育',
        '运动',
        '电竞',
        '国家',
      ],
      top_index: 0, //声明index 默认显示
    }
  },
  methods: {
    top_onclick(index) {
      //点击加载数据和变色
      this.top_index = index
      this.list_top = []
         this.loading = true
      axios
        .get(' http://api.kudesoft.cn/news/list', {
          params: {
            kw: this.list_title[this.top_index],
            page: 2,
          },
        })
        .then((res) => {
          console.log(res.data.result.data)
          this.list_top = [...this.list_top, ...res.data.result.data]
          this.loading = false
          if (this.list_top.length >= 40) {
            this.finished = true
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    onRefresh() {
      axios
        .get(' http://api.kudesoft.cn/news/list', {
          params: {
            kw: this.list_title[this.top_index],
            page: 2,
          },
        })
        .then((res) => {
          this.list_top = []
          this.refreshing = false
          this.loading = false
          this.finished = false
          this.list_top = res.data.result.data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      axios
        .get(' http://api.kudesoft.cn/news/list', {
          params: {
            kw: this.list_title[this.top_index],
            page: 2,
          },
        })
        .then((res) => {
          console.log(res.data.result.data)
          this.list_top = [...this.list_top, ...res.data.result.data]
          this.loading = false
          if (this.list_top.length >= 40) {
            this.finished = true
          }
        })
        .catch((err) => {
          console.error(err)
        })
      // 加载状态结束

      // 数据全部加载完成
    },
  },
}
</script>

<style scoped>
.top_div_main_title {
  border-bottom: 2px solid red;
}
.top_div_main {
  display: inline-flex;
  line-height: 5.5vh;
  margin-right: 5%;
  margin-left: 3%;
}
.top_div_little {
  width: 200vw;
  height: 100%;
}
.top_div_big {
  overflow: scroll;
  width: 100%;
  height: 6vh;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid gainsboro;
}
.top_div_big::-webkit-scrollbar {
  display: none;
}
</style>
